<template>
  <div class="flex flex-col gap-2 p-4 bg-white border-t rounded-t-md">
    <textarea
        v-model="text"
        rows="3"
        placeholder="输入你的问题，Enter发送"
        class="resize-none w-full p-3 border rounded-md focus:outline-none"
        @keydown.enter.exact.prevent="send"
    ></textarea>

    <div class="flex justify-between items-center">
      <div class="flex gap-2 items-center text-sm text-gray-700">
        <select v-model="model" class="border rounded px-2 py-1">
          <option value="gpt-3.5">GPT-3.5</option>
          <option value="gpt-4">GPT-4</option>
        </select>

        <label class="flex items-center gap-1">
          <input type="checkbox" v-model="search" />
          联网搜索
        </label>

        <label class="flex items-center gap-1">
          <input type="checkbox" v-model="think" />
          深度思考
        </label>

        <input
            type="file"
            @change="handleUpload"
            class="text-sm text-gray-500"
            multiple
        />
      </div>

      <button
          class="bg-blue-500 text-white px-4 py-1 rounded hover:bg-blue-600 transition"
          @click="send"
          :disabled="loading"
      >
        {{ loading ? '发送中...' : '发送' }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const emit = defineEmits(['send'])

const text = ref('')
const model = ref('gpt-3.5')
const search = ref(false)
const think = ref(false)
const loading = ref(false)

const handleUpload = (e) => {
  const files = e.target.files
  emit('upload', files)
}

const send = () => {
  if (!text.value.trim()) return
  loading.value = true
  emit('send', {
    text: text.value,
    model: model.value,
    search: search.value,
    think: think.value
  })
  text.value = ''
  setTimeout(() => (loading.value = false), 300) // 模拟发送结束
}
</script>
